{% load filter %}
{% csrf_token %}
{% if userComments %}
    {% for userComment in userComments %}
        <div class="media" style="margin-bottom: 30px">
            <div class="media-left">
                <a href="javascript:;">
                    <img class="media-object img-circle" style="height: 50px;" src="/static/image/head.jpg" alt="">
                </a>
            </div>
            <div class="media-body" style="border-bottom: 1px solid grey;">
                <h4 class="media-heading" style="font-weight: bold">{{ userComment.user_id|getFirstName }}</h4>
                {{ userComment.words }}
            </div>
            <div class="media-right" style="padding: 5px 0 0 10px; border-bottom: 1px solid grey; width: 1000px">
                <h5 style="margin-bottom: 10px; color: grey">{{ userComment.commenttime|date:"Y-m-d H:i:s" }}</h5>
            </div>
        </div>
    {% endfor %}
{% else %}
    <div style="width: 100%; height: 200px;display: flex;
			align-items: center;
			justify-content: center;">
        <img style="height: 100px;" src="/static/image/logo.png">
        <div class="alert alert-info" role="alert">
            暂时没有评论 ,赶紧抢占沙发吧^_^
        </div>
    </div>
{% endif %}
